<template>
  <div>
    <nav-text><span slot="navText">当前位置: 数据中心 > 设置 > 仪器类型</span></nav-text>
    <div class="searchBox">
      <div class="customBtn">
        <download-button>
          <el-button
            @click.stop="showaddBox"
            slot="dounloadBtn"
            type="primary"
            icon='el-icon-plus'
            circle
          ></el-button>
        </download-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        :header-cell-style="headStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        border
        :data="tableData"
        :fit="fit"
        :highlight-current-row='highlight'
      >
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dataId"
          label="序 号"
          min-width="50"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="type"
          label="仪 器 类 型"
        >
        </el-table-column>
        <!-- <el-table-column
          show-overflow-tooltip
          align="center"
          prop="principal"
          label="操 作"
        >
          <template slot-scope="scope">
            <el-button
              @click.stop="showAlterBox(scope.row)"
              class="el-button-details"
              size="medium "
              type="text"
            >修 改</el-button>
            <el-button
              @click.stop="showDeleteBox"
              class="el-button-delete"
              size="medium "
              type="text"
            >删 除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 分页器 -->
    <pagination>
      <el-pagination
        @current-change="pageNumLink"
        slot="pagination"
        background
        layout="prev, pager, next, jumper"
        :total="pageTotal"
        :page-size="pageSize"
        hide-on-single-page
      >
      </el-pagination>
    </pagination>
    <!-- 删除弹框 -->
    <delete-box v-if="deleteBoxStates">
      <button
        slot="cancel"
        @click.stop='cancelDeleteBox'
      >取 消</button>
      <button
        slot="affirm"
        @click.stop="affirmDeleteBox"
      >确 认</button>
    </delete-box>
    <!-- 新增数据弹框 -->
    <baseDataBox v-if="isShowAddData">
      <span slot="title">新 增 数 据</span>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >仪器类型:</label>
            <input
              v-model="addBoxType"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入仪器类型"
              type="text"
            />
          </baseInput>
        </div>
        <div>
        </div>
      </li>

      <button
        slot="delete"
        @click.stop="cancelAddBox"
      >取 消</button>
      <button
        slot="affirm"
        @click.stop="affirmAddBox"
      >确 认</button>
    </baseDataBox>
    <!-- 修改数据弹窗 -->
    <!-- <baseDataBox v-if="isShowAlterData">
      <span slot="title">修 改 数 据</span>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >仪器类型:</label>
            <input
              v-model="alterBoxType"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入仪器类型"
              type="text"
            />
          </baseInput>
        </div>
        <div>
        </div>
      </li>
      <button
        slot="delete"
        @click.stop="cancelAlterBox"
      >取 消</button>
      <button
        slot="affirm"
        @click.stop="affirmAlterBox"
      >确 认</button>
    </baseDataBox> -->
  </div>
</template>

<script>
import whiteSelectBox from "@/components/DataCenter/BaseForm/whiteSelectBox";
import { instumentTypeList } from "@/request/api.js";
import { insTypeAddData } from "@/request/api.js";
import navText from "@/components/DataCenter/MyLocation/myLocation";
import textBox from "@/components/DataCenter/BaseForm/textBox";
import searchButton from "@/components/DataCenter/BaseForm/searchBtn";
import downloadButton from "@/components/DataCenter/BaseForm/downloadBtn";
import selectBox from "@/components/DataCenter/BaseForm/selectBox";
import dataSelectBox from "@/components/DataCenter/BaseForm/dateSelectBox";
import pagination from "@/components/baseCpn/pagination.vue";

import deleteBox from "@/components/DataCenter/BaseForm/deleteBox.vue";
import baseDataBox from "@/components/DataCenter/BaseForm/baseDataBox";
import baseInput from "@/components/DataCenter/BaseForm/baseInput";
import "@/assets/base/dataCenterTableStyle.css";

export default {
  components: {
    navText,
    textBox,
    searchButton,
    downloadButton,
    selectBox,
    dataSelectBox,
    pagination,
    deleteBox,
    baseDataBox,
    baseInput,
    whiteSelectBox
  },
  mounted() {
    this.instumentTypeList(this.$page);
  },
  data() {
    return {
      addBoxType: "",
      alterBoxType: "",
      pageTotal: null,
      pageSize: 8,
      isShowAddData: false,
      isShowAlterData: false,
      deleteBoxStates: false,
      highlight: true,
      fit: true,
      Status: "",
      statusOption: ["启用", "停用"],
      headStyle: {
        height: "7rem",
        backgroundColor: "#131428",
        color: "#FFFFFF",
        border: "1px solid #792a4c",
        fontSize: "1.9rem"
      },
      cellStyle: {
        height: "7rem",
        border: "1px solid #792a4c",
        fontSize: "1.8rem"
      },
      tableData: []
    };
  },
  methods: {
    pageNumLink(e) {
      let E = String(e);
      console.log(E);
      if (e) {
        this.instumentTypeList(E);
      }
    },
    instumentTypeList(page) {
      instumentTypeList({
        page: page,
        pageSize: this.$pageSize
      })
        .then(res => {
          console.log("仪器类型表格请求成功", res.data.rows);
          if (res.data.success) {
            this.tableData = res.data.rows;
            // 表格序号内容
            this.pageTotal = res.data.total;
            for (var i = 0; i < res.data.rowcount; i++) {
              var k = (page - 1) * 8 + i + 1;
              this.tableData[i].dataId = k;
            }
          } else {
            this.$message.error({
              message: res.data.errorMsg
            });
          }
        })
        .catch(err => {
          console.log("仪器类型表格请求失败", err);
        });
    },
    showaddBox() {
      this.isShowAddData = true;
    },
    cancelAddBox() {
      this.isShowAddData = false;
    },
    affirmAddBox() {
      this.isShowAddData = false;
      //新增数据接口
      insTypeAddData({
        type: this.addBoxType
      })
        .then(res => {
          this.instumentTypeList(this.$page);
          if (res.data.success) {
            this.$message.success({
              message: "添加数据成功"
            });
          } else {
            this.$message.error({
              message: res.data.errorMsg
            });
          }
          console.log("添加数据请求成功", res);
        })
        .catch(err => {
          console.log("添加数据请求失败", err);
        });
    },

    showDeleteBox() {
      this.deleteBoxStates = true;
    },
    cancelDeleteBox() {
      this.deleteBoxStates = false;
    },
    affirmDeleteBox() {
      this.deleteBoxStates = false;
    },
    showAlterBox(e) {
      this.alterBoxType = e.type;
      this.isShowAlterData = true;
    },
    cancelAlterBox() {
      this.isShowAlterData = false;
    },
    affirmAlterBox() {
      this.isShowAlterData = false;
    },
    rowStyle(row) {
      if (row.rowIndex % 2 === 0) {
        return { backgroundColor: "#222644" };
      } else if (row.rowindex % 2 === 1) {
        return { backgroundColor: "#262b4b" };
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.searchBox {
  width: 100%;
  height: 13rem;
  display: flex;
  justify-content: flex-end;
  .customBtn {
    margin-right: 10rem;
    display: flex;
    .el-button {
      width: 7rem;
      height: 7rem;
      font-size: 4rem;
    }
  }
}
.tableBox {
  width: 95%;
  height: 63.5rem;
  margin: 0 auto;
  padding-top: 2rem;
  overflow: hidden;
  .el-button-details {
    font-size: 1.6rem;
    color: #33ffff;
    margin-right: 0.8rem;
  }
  .el-button-delete {
    font-size: 1.6rem;
    color: #ff9cc6;
  }
}
</style>